<template>
	<view>
		<u-toast ref="uToast"></u-toast>

		<u-popup :show="popup" mode="center" :closeable="disabledClick" @close="disabledClick ? popup = false : null">
			<view style="height:40vh">
				<view style="font-size:21px;padding:1vh 0 1vh 5vw">预约须知</view>
				<video style="height:100%" :src="videoSrc" :autoplay="true" :loop="true"></video>
			</view>
		</u-popup>

		<view style="display:flex" v-if="!popup">

			<view class="list">
				<view v-for="(item, index) in list" :class="index === active ? 'active' : ''" @click="tabClick(index)">
					{{ item.title }}
				</view>

			</view>
			<view style="flex:1;">
				<view class="title">医生列表</view>
				<view class="content" v-for="(item, index) in list" v-show="index === active">
					<view v-for="item in item.doctor" @click="targetReserveDetails(item.sectionid, item.id)">
						<view>
							<image :src="item.thumb" />
							<view>
								<view>{{ item.name }}</view>
								<view>{{ item.score }}</view>
							</view>
						</view>
						<view></view>
					</view>

					<u-empty mode="list" text="暂无医生" v-if="!item.doctor.length">
					</u-empty>

				</view>

			</view>

		</view>

	</view>
</template>

<script>
import {
	section,
	doctorIndex,
} from '../../request/index.js'
import baseUrl from '../../request/baseUrl.js'
export default {
	data() {
		return {
			popup: true,
			videoSrc: '',
			list: [],
			active: 0,
			content: [],
			disabledClick: false,
		}
	},
	onShow() {

	},
	onLoad(params) {
		// console.log(params.video);
		this.videoSrc = params.video;
		this.request().then(() => {
			setTimeout(() => {
				this.disabledClick = true;
			}, 500)
		});

	},
	methods: {
		targetReserveDetails(id, did) {
			uni.navigateTo({
				url: `/pages/reserveDetails/index?id=${id}&did=${did}`
			})
		},
		request() {
			return new Promise((resolve, reject) => {
				section().then(res => {
					this.list = res.data.list.map(item => {
						item.thumb = baseUrl + item.thumb;
						doctorIndex({
							id: item.id
						}).then(res => {
							item.doctor = res.data.list.map(item => {
								if (item.thumb.indexOf('https://thirdwx.qlogo.cn') < 0 &&
									item.thumb.indexOf(baseUrl) <
									0) {
									item.thumb = baseUrl + item.thumb
								}
								return item
							});
						})
						return item
					});
					resolve()
					// console.log(this.list);
				});
			})


		},
		tabClick(index) {
			this.active = index;
		},
	}
}
</script>

<style lang="scss">
.list {
	width: 32.5vw;

	>view {
		width: 100%;
		padding: 2vh 0;
		display: grid;
		place-content: center;
		font-size: 17px;
		background: #bed3ca;
		border-bottom: 1px solid white;

		&.active {
			background: white;
		}
	}
}

.title {
	padding-left: 2vw;
	font-size: 21px;
	margin: 1vh 0;
}

.content {
	>view {
		width: 91.5%;
		margin: 1.5vh auto;
		background: #f8f8f8;
		padding: 1.5vh 2vw;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>view:last-child {
			display: grid;
			place-content: center;
			color: white;
			background: #28da70;
			border-radius: 50%;
			width: 9.5vw;
			height: 9.5vw;

			padding: 2.5px;


			&::before {
				content: '预约';
				font-size: 14px;

			}
		}

		>view:first-child {
			display: flex;
			align-items: center;

			>image {
				width: 14vw;
				height: 14vw;
				border-radius: 2vw;
				margin-right: 2vw;
			}

			>view>view {
				&:first-child {
					margin-bottom: 1vh;
					font-size: 16px;
				}

				&:last-child {
					font-size: 13px;

					&::before {
						content: '评分：';
						font-size: 15px;
					}
				}
			}
		}
	}
}
</style>
